import React, { Component } from 'react';
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Player } from 'video-react';
import { Collapse, Affix, Button, Modal, Input, message } from 'antd';
import { VIDEO_LINK } from "../actions/types.js"
import { checkAuth } from "../actions/index";
import axios from "axios";
import moment from "moment";
import 'moment/locale/zh-cn';
const { TextArea } = Input;
moment.locale('zh-cn');
const Panel = Collapse.Panel;
class RaceAreaVideoDetail extends Component{
  state={
    comment_list:[],
    video_introduce:"儿时的李俊杰家庭幸福美满",
    video_list:[],
    video_url:"https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
    video_name:"《视频demo标题》",
    visible: false,
    comment:""
  }
  componentDidMount(){
    const videoID = this.props.match.params.videoID
    this.getVideoPlayData(videoID);
  }
  componentWillUpdate(nextprops){
    if(this.props.match.params.videoID !== nextprops.match.params.videoID){
      // this.setState({video_url:""})
      this.getVideoPlayData(nextprops.match.params.videoID)
    }
  }
  componentWillMount(){
    this.props.checkAuth();
  }
  getVideoPlayData(videoID){
    axios.get(`/Tgh/data/video_play_data?id=${videoID}`).then(res=>{
      const { comment_list, video_introduce, video_list, video_url, video_name } = res.data;
      this.setState({
        comment_list:comment_list,
        video_introduce:video_introduce,
        video_list:video_list,
        video_url:video_url,
        video_name:video_name
      })
    })
  }
  render(){
    const { video_name, video_url, video_introduce} = this.state;
    return(
      <div>
        <div className="top-title"><i className="fa fa-angle-left back" onClick={()=>this.props.history.go(-1)}/>视频播放</div>
        <Player
          playsInline
          poster="/assets/poster.png"
          src={video_url}
        />
        <Collapse accordion>
          <Panel header={video_name} key="1">
            <div className="video-desc">
              <p style={{marginBottom:"8px"}}><i className="fa fa-fire" style={{marginRight:"4px"}}></i>热度：2151</p>
              <div>简介：{video_introduce}</div>
            </div>
          </Panel>
        </Collapse>
        <div className="m-pp-new-icons">
          <div className="m-icon-link">
            <i className="video-detail-icon icon-comment" aria-hidden="true"></i>
            <span>{this.state.comment_list.length}</span>
          </div>
          <div className="m-icon-link">
            <i className="video-detail-icon icon-newlike" aria-hidden="true"></i>
            <span>2</span>
          </div>
          <div className="m-icon-link">
            <i className="video-detail-icon icon-share" aria-hidden="true"></i>
            <span>分享</span>
          </div>
        </div>
        <section className="playlist">
          <h3 style={{fontWeight:"bold"}}>播放列表</h3>
          <div className="playlist-slide">
            {this.renderPlayList()}
          </div>
        </section>
        <section className="comment-list">
          <Affix offsetTop={44}>
            <div className="comment-list-top">
              <h3 style={{fontWeight:"bold"}}>评论列表</h3>
              {this.props.user && <Button onClick={()=>{this.setState({visible:true})}}>发表评论</Button>}
              {this.renderCommentModal()}
            </div>
          </Affix>
          {this.renderComment()}
        </section>
      </div>
    )
  }
  renderPlayList(){
    const {video_list} = this.state;
    return video_list.map(data=>{
      const { video_id, video_name, video_time } = data
      let videoImageUrl = data.video_image;
      if(videoImageUrl.indexOf("http") === -1){
        videoImageUrl = `/images/${videoImageUrl}`
      }
      // console.log(this.secondToMinuteSecond(video_time))
      return(
        <div className="playlist-link-contain" key={video_id}>
          <Link to={`${VIDEO_LINK}/${video_id}`} className="playlist-link" style={{backgroundImage: `url(${videoImageUrl})`}}>
            <div className="playlist-time">{this.secondToMinuteSecond(video_time)}</div>
          </Link>
          <div className="piclist-title"><div>{video_name}</div></div>
        </div>
      )
    })
  }
  renderCommentModal(){
    const { visible, comment } = this.state;
    return(
      <Modal
        title="发表评论"
        visible={visible}
        onOk={()=>this.handleOk()}
        onCancel={()=>this.handleCancel()}
        okText="发表"
        cancelText="取消"
      >
        <TextArea
          placeholder="请输入你的评论内容"
          value={comment}
          onChange={(e)=>{this.changeComment(e.target.value)}}
          autosize
        />
      </Modal>
    )
  }
  renderComment(){
    const {comment_list} = this.state;
    return comment_list.map((comment,idx)=>{
      const { content, create_time, nick_name } = comment
      let userImageUrl = comment.user_img || "";
      if(userImageUrl.indexOf("http") === -1){
        userImageUrl = `/images/${userImageUrl}`
      }
      let timeShow = moment(parseInt(create_time,10)).format("YYYY.MM.DD HH:mm:ss");
      return(
        <div className="comment-detail" key={idx}>
          <div className="c-user-info">
            <div className="c-user-img" style={{backgroundImage:`url(${userImageUrl})`}}></div>
            <div>
              <div className="c-user-name">{nick_name}</div>
              <div className="time">{moment(timeShow).fromNow()}</div>
            </div>
          </div>
          <div style={{fontSize:16,color:"#333"}}>
            {content}
          </div>
        </div>
      )
    })
  }
  changeComment(val){
    // console.log(val);
    this.setState({comment:val});
  }
  handleOk(){
    let { comment } = this.state;
    comment = comment.replace(/(^\s*)|(\s*$)/g, "")
    if(comment === ""){
      message.warning("发表的评论不能为空");
      return;
    }
    const video_id = this.props.match.params.videoID
    axios.get(`/Tgh/data/do_comment?comment=${this.state.comment}&video_id=${video_id}`).then(res=>{
      message.success("发表评论成功");
      this.handleCancel();
      axios.get(`/Tgh/data/video_play_data?id=${video_id}`).then(res=>{
        const { comment_list } = res.data;
        this.setState({
          comment_list:comment_list,
        })
      })
    })
  }
  handleCancel(){
    this.setState({visible:false});
  }
  secondToMinuteSecond(second){
    //计算分钟
    //算法：将秒数除以60，然后下舍入，既得到分钟数
    let minute;
    minute = Math.floor(second/60);
    //计算秒
    //算法：取得秒%60的余数，既得到秒数
    second = second%60;
    //将变量转换为字符串
    minute += '';
    second += '';
    //如果只有一位数，前面增加一个0
    minute = (minute.length===1)?'0'+minute:minute;
    second = (second.length===1)?'0'+second:second;
    return minute+':'+second;
  }
}

function mapStateToProps(state) {
  // console.log('state is',state);
  const { status, user } = state.auth;
  return{ user, status };
}

export default connect(mapStateToProps, {checkAuth})(RaceAreaVideoDetail);